/* 
1 在onLoad生命周期事件中 获取 goods_id
2 构造请求 获取数据
3 再去渲染页面  
4 页面收藏 取消功能
  1 要清晰知道存储的格式
  2 使用小程序 本地存储  和 h5本地存储存在一些区别
  3 实现步骤
    1 绑定点击事件 
    2 获取本地存储中数据 collect = 要么正常的对象 || 空字符串
    3 根据收藏状态 来切换显示  收藏 图标 和 弹出提示框
      1 onLoad时候 获取 本地存储中的数据 查看是否被收藏过 是   isCollect=true
5 图片预览功能
  1 给图片绑定点击事件
6 加入购物车
  1 点击事件触发
  2 获取本地存储中的 购物车数据 cart 对象 格式 很类似 收藏的对象 
      要确保 这个是数据 是一个对象格式 
  3 判断 这个对象当中 有没有 要添加购物车的 商品对象
  4 不存在 就创建  同时 给 这个商品对象 加一个属性 count=1 数量的意思 
  5 已经存在 获取  count++；
  6 把 新的数据 重新 填充到 本地存储中  

  


 */

import { request } from "../../utils/index";
import regeneratorRuntime from '../../lib/runtime/runtime';
// 也可以使用 es 7  async 同步代码的方式来写异步
Page({
  data: {
    // 页面要渲染的数据
    goodsObj: {},
    // 是否被收藏
    isCollect: false
  },
  // 接口的返回值
  tmpGoods: {},

  onLoad(options) {
    // 通过  onLoad 中的 options 来获取 url上参数
    const { goods_id } = options;

    this.getDetail(goods_id);

    // 获取本地存储中的数据
    let collect = wx.getStorageSync("collect") || {};

    // 判断是否被收藏了
    if (collect[goods_id]) {
      // 被收藏
      this.setData({
        isCollect: true
      })
    } else {
      // 未收藏
    }
  },

  // 发送请求，获取商品详情数据
  async getDetail(goods_id) {

    // 获取接口的返回值
    const res = await request({ url: "goods/detail?goods_id=" + goods_id });
    // 赋值到 自定义对象上

    this.tmpGoods = res;

    // 传递到页面上
    this.setData({
      goodsObj: {
        pics: this.tmpGoods.pics,
        goods_name: this.tmpGoods.goods_name,
        goods_price: this.tmpGoods.goods_price,
        // iphone 不支持 webp 要修改成 jpg
        // 最好还是让后台去修改 
        goods_introduc: this.tmpGoods.goods_introduce.replace(/\.webp/g, ".jpg")
      }
    })

  },

  // 收藏和取消点击
  handleItemCollect() {
    // 页面的提示
    let title = "收藏成功"
    // 小程序 获取本地存储的api 也可能是空字符串 ""
    let collect = wx.getStorageSync("collect") || {};

    // 商品的id
    let { goods_id } = this.tmpGoods


    // 切换页面收藏效果
    let { isCollect } = this.data;

    isCollect = !isCollect;
    // 页面效果已经实现
    this.setData({
      isCollect
    })

    // 本地存储中的数据还没同步
    if (isCollect) {
      // 要收藏
      // 给收藏 大 对象赋值
      collect[goods_id] = this.tmpGoods;
    } else {
      // 要删除属性
      delete collect[goods_id];
      title = "取消收藏";
    }

    // 收藏成功
    wx.showToast({
      title: title,
      icon: 'none',
      duration: 1500,
      // 当前组件显示的时候 用户无法再点击页面的其他按钮
      mask: true
    });


    // 设置到 本地存储当中
    wx.setStorageSync("collect", collect);



  },
  // 图片点击事件
  handlePreviewImage(e) {
    const { src } = e.currentTarget.dataset;
    // 获取接口中的轮播图图片的大图  数组 自己构造
    const urls = this.tmpGoods.pics.map(v => v.pics_big);

    // 开始预览图片
    wx.previewImage({
      current: src,
      urls: urls
    });

  },
  // 加入购物车点击
  handleItemAdd() {
    //  2 获取本地存储中的购物车数据 key="cart"
    let cart = wx.getStorageSync("cart") || {};
    // 3 判断对象 有没有 要添加的商品的数据 
    const { goods_id } = this.tmpGoods;
    if (cart[goods_id]) {
      // 以前添加过这个商品
      cart[goods_id].count++;
      wx.setStorageSync("cart", cart);
    } else {
      // 你是第一次添加该商品
      let newGoods = this.tmpGoods;
      newGoods.count = 1;
      // 默认 是选中状态
      newGoods.isChecked=true;
      // 把新对象 赋值到 cart对象上  要填充的是cart这个对象
      cart[goods_id] = newGoods;
      // 重新填写回本地存储中 
      wx.setStorageSync("cart", cart);

    }

    // 弹出提示
    wx.showToast({
      title: '添加成功',
      icon: 'none',
      duration: 1500,
      mask: true
    });
  }
})